<template>
  <div class="floor-list">
    <section class="floor-item" v-for="(floor, index) in floorList" :key="index">
      <img :src="floor.headUrl" alt="" class="floor-item-hea" />
      <div class="floor-item-con">
        <div class="floor-cate" v-for="(category, index) in floor.list" :key="index">
          <p>{{ category.title }}</p>
          <p>{{ category.desc }}</p>
          <div class="prod">
            <img :src="product.imgUrl" alt="" v-for="(product, index) in category.products" :key="index" />
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { getFloorCon } from '@/http/index.js'
export default {
  data() {
    return {
      floorList: [],
    }
  },
  created() {
    this.fetchFloors()
  },
  methods: {
    fetchFloors() {
      getFloorCon().then((res) => {
        this.floorList = res.data
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/mixin.scss';
.floor-list {
  width: 100%;
  padding-bottom: 100px;
  .floor-item {
    .floor-item-hea {
      width: 100%;
      height: 80px;
      background-color: #f6f6f6;
    }
    .floor-item-con {
      display: flex;
      flex-wrap: wrap;
      @include boxSizing;
      .floor-cate {
        width: 50%;
        padding: 20px;
        border-right: 1px solid #dcdcdc;
        border-bottom: 1px solid #dcdcdc;
        @include boxSizing;

        &:nth-child(2n) {
          border-right: none;
        }

        p {
          font-size: 34px;
          color: #333;

          &:nth-child(2) {
            padding: 10px 0;
            font-size: 26px;
            color: $red;
          }
        }
        .prod {
          display: flex;
          justify-content: space-around;
          width: 100%;

          img {
            width: 130px;
            height: 130px;
          }
        }
      }
    }
  }
}
</style>
